<template>
  <a-menu theme="dark"
          mode="inline"
          :inlineIndent="inlineIndent"
          @click="handleClick"
          :defaultSelectedKeys="defaultSelectedKeys"
          :defaultOpenKeys="defaultOpenKeys">
    <template v-for="menu in menuList">
      <a-menu-item :key='menu.path' v-if="menu.children===undefined">
        <a-icon v-show="isIcon" :type="menu.meta.icon"/>
        <span>{{menu.meta.name}}</span>
      </a-menu-item>
      <a-sub-menu :key='menu.path' v-else>
        <span slot="title"><a-icon v-show="isIcon" :type="menu.meta.icon"/><span>{{menu.meta.name}}</span></span>
        <a-menu-item v-for="menuC in menu.children" :key="menu.path+'/'+menuC.path">
          <a-icon v-show="isIcon" :type="menuC.meta.icon"/>
          <span>{{menuC.meta.name}}</span>
        </a-menu-item>
      </a-sub-menu>
    </template>
  </a-menu>
</template>

<script>
  import {Icon, Menu} from "ant-design-vue"

  export default {
    name: "NipMenu",
    components: {
      AIcon: Icon,
      AMenu: Menu,
      AMenuItem: Menu.Item,
      ASubMenu: Menu.SubMenu,
    },
    props: {
      isIcon: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        collapsed: false,
        menuList: null,
        inlineIndent: 16,
        defaultSelectedKeys: [],
        defaultOpenKeys: [],
      }
    },
    mounted() {
      this.menuList = this.$router.options.routes[0].children;
      if (this.$route.matched.filter(item => item.name).length === 1) {
        this.onRouter(this.menuList[0].path);
      }
      this.defaultSelectedKeys.push(this.$route.matched.filter(item => item.name)[this.$route.matched.filter(item => item.name).length - 1].path);
      this.$route.matched.filter(item => item.name).length > 2 ? this.defaultOpenKeys.push(this.$route.matched.filter(item => item.name)[this.$route.matched.filter(item => item.name).length - 2].path) : '';
    },
    methods: {
      handleClick(e) {
        this.$router.push(e.key);
      },
      onRouter(path) {
        this.$router.push(path);
      }
    }
  }
</script>

<style scoped>

</style>
